<template>
  <div>
    <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
    <r-search :searchHandle="searchHandleAdd" />
    <r-table :isSelection="false" :isPagination="true" :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>
    <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="100px" dialogWidth="500px" :isHandle="true" />

    <Related_advertising ref="Related_advertising"></Related_advertising>
    <Associated_devices ref="Associated_devices"></Associated_devices>
  </div>
</template>
<script>
  import Related_advertising from "./cus/Related_advertising";
  import Associated_devices from "./cus/Associated_devices";
  export default {
    components: {
      Related_advertising,
      Associated_devices
    },
    data() {
      return {
        searchData: {
          name: '',
          status:''
        },
        searchForm: [
          {
            type: 'input',
            prop: 'name',
            placeholder: '广告名称',
            width: 150
          },
          // {
          //   type: 'select',
          //   prop: 'type',
          //   placeholder: '广告类型',
          //   width: 150,
          //   options: [
          //     {
          //       label: '图片',
          //       value: 1
          //     },
          //     {
          //       label: '视频',
          //       value: 2
          //     },
          //   ]
          // },
          // {
          //   type: 'date',
          //   prop: 'adName',
          //   placeholder: '更新时间',
          //   width: 150
          // },
          {
            type: 'select',
            prop: 'status',
            placeholder: '启用状态',
            width: 150,
            options: [
              {
                label: '启用',
                value: 1
              },
              {
                label: '禁用',
                value: 2
              },
            ]
          },
        ],
        searchHandleAdd: [
          {
            label: "新增",
            type: "success",
            handle: e => this.elFormVisible(),
          },
        ],
        searchHandle: [
          {
            label: '搜索',
            type: 'success',
            icon: 'el-icon-search',
            handle: e => this.init()
          },
          // {
          //     label: '重置',
          //     icon: 'el-icon-refresh-right',
          //     handle: e => this.searchFromReset()
          // }
        ],
        tableData: [],
        tableCols: [
          {
            label: '序号',
            prop: 'id'
          },
          {
            label: '集合名称',
            prop: 'name'
          },
          {
            label: '已关联广告',
            prop: 'advNum'
          },
          // {
          //   label: '总播放时长',
          //   prop: 'type_des'
          // },
          {
            label: '已关联设备',
            prop: 'deviceNum'
          },
          {
            label: '备注信息',
            prop: 'remarks'
          },
          {
            label: '更新时间',
            prop: 'ctime',
            formatter: e => this.getDeta(new Date(e.ctime).getTime())
          },
          {
            label: '启用状态',
            type: "switch",
            prop: 'status',
            values: [1, 2],
            // change: (row) => this.changeOnline(row)
          },

          {
            label: '操作',
            type: "button",
            width: 280,
            btnList: [
              {
                label: '编辑',
                type: 'text',
                handle: (row) => this.elFormDetail(row),
              },
              {
                label: '删除',
                type: 'text',
                handle: (row) => {
                  this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(async () => {
                    var res = await this.apis.advertBox_del({
                      id: row.id
                    });
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                    this.init();
                  }).catch(() => {

                  });
                }
              },
              {
                label: '已关联广告',
                type: 'text',
                handle: (row) => {
                    this.$refs.Related_advertising.fun_show(row);
                }
              },
              {
                label: '已关联设备',
                type: 'text',
                handle: (row) => {
                  this.$refs.Associated_devices.fun_show(row);
                }
              },
            ]
          }
        ],
        tablePage: { limit: 10, page: 1, total: 0 },
        formData: {
          name:'',
          remarks:''
        },
        formCols: [
          { type: "input", label: "集合名称", width: 350, prop: "name", rmblock: true, remark: '' },
          { type: "input", label: "备注说明", width: 350, prop: "remarks", rmblock: true, remark: '' },
        ],
        formRules: {
          name: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
          remarks: [
            { required: true, message: '请输入', trigger: 'blur' },
          ]
        },
        formHandle: [
          {
            label: "取消",
            handle: e => this.elFormVisible(),
          },
          {
            label: "确定",
            type: "success",
            handle: e => this.elFormSubmit(),
          },

        ],


      };
    },

    computed: {},
    mounted() {
      this.init()

    },
    methods: {
      async init() {
        let parm = { ...this.searchData,...{
            pageNum:this.tablePage.page,
            pageSize:this.tablePage.limit
          } }
        let res = await this.apis.advertBox_list(parm)
        if (res) {
          this.tablePage.total = res.total;
          var list = res.rows || [];
          this.tableData = list;
        }

      },

      async changeOnline(row) {
        Object.keys(this.formData).forEach(key => {
          this.formData[key] = row[key]
        })
        this.formData.id = row.id;
        this.formData.equipmentNos = this.formData.equipmentNos.join(',')
        console.log(this.formData.equipmentNos);
        await this.api.advertupdate(this.formData)
      },
      async elFormSubmit(row) {
        this.$refs.elForm.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            if (this.formData.id) {
              let res = await this.apis.advertBox_updata(this.formData)
              if (res) {
                this.init()
                this.elFormVisible()
              }
            } else {
              let res = await this.apis.advertBox_save(this.formData)
              if (res) {
                this.init()
                this.elFormVisible()
              }
            }
          }
        });

      },
      elFormDetail(row) {
        Object.keys(this.formData).forEach(key => {
          this.formData[key] = row[key]
        })
        this.formData.id = row.id;
        this.elFormVisible()
      },
    }
  };
</script>
<style scoped lang='scss'>
  .el-icon-search {
    margin-right: 10px;
  }
  .Tip {
    margin-left: 20px;
  }
</style>
